<!DOCTYPE html>
<html ng-app="indexApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--<link href="css/bootstrap-theme.css" rel="stylesheet">-->
    <link href="css/jquery-ui.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/sweetalert2.css" rel="stylesheet">
    <script src="js/angular/1.6.3/angular.js"></script>
    <script src="js/angular/1.6.3/angular-route.js"></script>
    <script src="js/angular/1.6.3/angular-ui-router.js"></script>
    <script src="js/angular/1.6.3/angular-file-upload.js"></script>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/ie10-viewport-bug-workaround.js"></script>
    <script src="js/ie-emulation-modes-warning.js"></script>
    <script src="js/sweetalert.min.js"></script>
    <script src="ng/indexApp.js"></script>
    <script src="ng/MLdataPRE.js"></script>
    <title>预处理工具</title>
    <style type="text/css">
        .load-btn,.load-btn::before{
            width:70px;
            height:30px;
            line-height:1.42857143;
            text-align:center;
            padding: 6px 12px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: normal;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .load-btn{
            position:relative;
            background:#5ad;
            color:#fff;
            cursor:pointer;
        }
        .load-btn::before{
            content:"处理中…";
            position:absolute;
            display:none;
            z-index:2;
            top:0;
            left:0;
            color: #ffffff;
            text-shadow:rgba(100,0,0,1) 0 0 3px;
            background:linear-gradient(45deg,#55aadd 0%,#55aadd 20%,#59C2DD 20%, #59C2DD 45%,#55aadd 45%,#55aadd 70%,#59C2DD 70%, #59C2DD 95%,#55aadd 95%,#55aadd 100%);
            background-size:30px 30px;
            background-position:0 0;
            animation:click 1s infinite linear;
        }
        .load-btn.click::before{
            display:block;
            cursor:not-allowed;
        }
        @keyframes click {
            0%{
                background-position:0 0;
            }
            100%{
                background-position:30px 0;
            }
        }
    </style>
</head>
<body ng-controller="MLdataPRE">
<div class="container-fluid">
    <div class="" style="height: 20px"></div>
    <span class="btn-info btn-sm " style="display: inline-block"  disabled="">任务管理
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据集
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="background-color: #00a4e7;display: inline-block">数据预处理
    </span>
    <span class="glyphicon glyphicon-chevron-right" ></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">数据建模
    </span>
    <span class="glyphicon glyphicon-chevron-right" style="color: #8c8c8c"></span>
    <span class="btn-info btn-sm " style="display: inline-block" disabled="">预测分析
    </span>
    <h3 class="page-header">数据集预处理
    </h3>

    <div class="row">
        <div class="col-sm-8 col-md-8">
            <div class="alert alert-info alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>说 明</strong> 对选中数据集设置标签以及数值预处理。
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">数据集配置（{{datasetconf.UUID}}）</div>
                <div class="panel-body">
                    <div class="row" ng-show!="mysqlDbInfoVisible">
                        <div class="col-md-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">选择表</div>
                                <div class="panel-body">
                                    <div class="col-md-3">
                                        <select ng-model="selectedDatabaseIndex"
                                                ng-init="getTableName();selectedDatabaseIndex = 0"
                                                ng-change="getDataSample()"
                                                class="form-control" style="width: 100%;">
                                            <option ng-repeat="x in dbInfoList" value="{{$index}}">{{x}}</option>
                                        </select>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-condensed table-hover">
                                                    <caption>数据表 {{currentMySQLTable.name}} 的数据样例</caption>
                                                    <thead>
                                                    <tr>
                                                        <th>No</th>

                                                        <th ng-repeat="key in tableItem"
                                                            ng-style="{'background-color':isSelected(key) ?'#aad3ff':''}"
                                                            style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                            {{key}}
                                                        </th>

                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr ng-repeat="item in mysqlTableSampleData">
                                                        <td>{{$index+1}}</td>
                                                        <td ng-repeat="key in countItem"
                                                            ng-style="{'background-color':isSelected(key) ?'#aad3ff':''}"
                                                            style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                            {{item[key]|limitTo:10}}
                                                        </td>
                                                    </tr>
                                                    <tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row" ng-show!="mysqlDbTableInfoVisible">
                        <div class="col-md-6">
                            <div class="panel panel-default">
                                <div class="panel-heading">选择数据项</div>
                                <div class="panel-body">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="table-responsive" style="max-height:750px;overflow:auto;text-align: center;">
                                                <table class="table table-bordered table-condensed table-hover" style="margin:auto;">
                                                    <caption>数据表 {{currentMySQLTable.name}} 的结构
                                                    </caption>
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                            style="float: right;margin-right: 5px"
                                                            ng-click="buildJson()"
                                                    >
                                                        确认
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1;float: right;margin-right: 5px"
                                                            ng-click="unselectAll($event)"
                                                    >
                                                        全不选
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1;float: right"
                                                            ng-click="selectAll($event,tableItem)">
                                                        全选
                                                    </button>
                                                    <thead>
                                                    <tr>
                                                        <th>No</th>
                                                        <th>字段名</th>
                                                        <th>数据类型</th>
                                                        <th>数值分析</th>
                                                        <th>字段操作</th>
                                                    </tr>
                                                    </thead>

                                                    <tbody>
                                                    <tr ng-repeat="key in tableItem">
                                                        <td>{{$index+1}}</td>
                                                        <td>{{key}}</td>
                                                        <td>{{itemType[$index]}}</td>
                                                        <td>
                                                            <button type="button" class="btn btn-sm btn-default"
                                                                    ng-click="addSpace();updateSubject('1',key,'selected')">
                                                                增加
                                                            </button>
                                                            <button type="button" class="btn btn-sm btn-default"
                                                                    ng-click="addSpace();updateSubject('0',key,'selected')">
                                                                删除
                                                            </button>
                                                        </td>
                                                        <td>
                                                            <input id="{{key}}" name="CB" type="checkbox"
                                                                   ng-click="updateKeys($event,key)" ng-model="checkflag2"
                                                            />
                                                        </td>

                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!--
                                            <pre>{{selectedTagsString}}</pre>
                                            <pre>{{selected|json}}</pre>
                                            <pre>{{selectedTags|json}}</pre>
                                             -->
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="col-md-6">
                            <div class="row" id=mydiv>
                                <div class="col-md-12">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">标签规则</div>
                                        <div class="panel-body">
                                            <button type="button" class="btn btn-sm btn-success "
                                                    ng-click="lableShow()">
                                                设置标签
                                            </button>
                                            <div ng-show="setLable" style="margin-top: 5px;">
                                                <div class="form-group" >

                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('(');">
                                                        (
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('+')">
                                                        +
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('-')">
                                                        -
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('*')">
                                                        *
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('/')">
                                                        /
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson(')');">
                                                        )
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('>');">
                                                        >
                                                    </button>

                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('<');">
                                                        <
                                                    </button>
                                                    <button type="button" class="btn btn-sm "
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('=');">
                                                        =
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('!=');">
                                                        !=
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('>=');">
                                                        >=
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('<=');">
                                                        <=
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('&&');">
                                                        &&
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('||');">
                                                        ||
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('!');">
                                                        !
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson(':');">
                                                        :
                                                    </button>
                                                    <button type="button" class="btn btn-sm"
                                                            style="background-color: #dbe8f1"
                                                            ng-click="rulaInput();packageJson('\n');">
                                                        换行
                                                    </button>
                                                </div>
                                                <div >
                                                    <textarea class="form-control" id="textarea-sql" rows="6"
                                                              placeholder="a > 1 && b < 1 : tag = A"
                                                              ng-model="rula"  ng-blur="addSpace()"
                                                              ng-click="rulaInput();getCurrentPos($event)"
                                                              ng-keyup="getCurrentPos($event)"
                                                              style="font-size: 15px;font-family: 'Courier New', Courier, monospace;"
                                                    ></textarea>
                                                </div>
                                                <div >
                                                    <textarea class="form-control" id="textarea-des" rows="6"
                                                              placeholder="标签的现实意义，例如： 1:盈利"
                                                              ng-model="labelDes"
                                                              style="font-size: 15px;font-family: 'Courier New', Courier, monospace;margin-top: 10px"
                                                    ></textarea>
                                                </div>
                                                <div class="row" style="margin-top: 5px">
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <button type="button" class="btn btn-sm btn-success"
                                                                    style="float: right"
                                                                    ng-click="submitJson()">
                                                                生成标签
                                                            </button>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="row" ng-show!="mysqlDbTableInfoVisible" id=mydiv>
                                <div class="col-md-12">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">缺失值</div>
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <select ng-model="MissingIndex"
                                                            ng-init="MissingIndex = 0"
                                                            class="form-control" style="width: 100%;">
                                                        <option ng-repeat="x in MissingList" value="{{$index}}">{{x}}
                                                        </option>
                                                    </select>

                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button"
                                                            class="load-btn" id="analysis-btn"
                                                            ng-click="preMissing()" ng-disabled="!lockButton">处 理
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="panel-heading">归一化</div>
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <select ng-model="normalizationIndex"
                                                            ng-init="normalizationIndex = 0"
                                                            ng-change="clearFormulaAndRula()"
                                                            class="form-control" style="width: 100%;">
                                                        <option ng-repeat="x in normList" value="{{$index}}">{{x}}
                                                        </option>
                                                    </select>

                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button"
                                                            class="load-btn" id="pre_norm"
                                                            ng-click="preNorm()" ng-disabled="!lockButton||!missingPreLock">处 理
                                                    </button>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="panel-heading">PCA降维</div>
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-md-3" >
                                                    <button type="button" class="btn btn-sm btn-warning"
                                                            ng-click="pcaSet()" ng-disabled="!lockButton||!missingPreLock">
                                                        使用PCA降维
                                                    </button>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="col-md-6" ng-show="pcaShow">
                                                        <input
                                                                type="text" class="form-control"
                                                                ng-model="currentMySQLTable.K" placeholder="映射维数K" >

                                                    </div>
                                                    <div class="col-md-6" ng-show="pcaShow">
                                                        <button type="button" class="btn btn-sm btn-success"
                                                                ng-click="startPCA()">
                                                            处理
                                                        </button>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="panel panel-default" style="margin-top: 10px" ng-show="mysqlDbInfoVisible">
                                        <div class="panel-heading">预处理数据集样例</div>
                                        <div class="panel-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="table-responsive">
                                                        <table class="table table-bordered table-condensed table-hover">
                                                            <caption>预处理数据表 {{currentMySQLTablePre.name}} 的数据样例</caption>
                                                            <thead>
                                                            <tr>
                                                                <th>No</th>

                                                                <th ng-repeat="key in tableItemPre"
                                                                    ng-style="{'background-color':isSelected(key) ?'#aad3ff':''}"
                                                                    style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                                    {{key}}
                                                                </th>

                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            <tr ng-repeat="item in mysqlTableSampleDataPre">
                                                                <td>{{$index+1}}</td>
                                                                <td ng-repeat="key in countItemPre"
                                                                    ng-style="{'background-color':isSelected(key) ?'#aad3ff':''}"
                                                                    style="min-width: 80px;max-width:300px;word-wrap: break-word">
                                                                    {{item[key]|limitTo:10}}
                                                                </td>
                                                            </tr>
                                                            <tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <button type="button" class="btn btn-success"
                                                        style="float: right"
                                                        ng-click="predictstart()">
                                                    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> 预测分析
                                                </button>
                                                <button type="button" class="btn btn-success"
                                                        style="float: right;margin-right: 5px"
                                                        ng-click="start()">
                                                    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span> 数据建模
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>